<template>
  <div class="display">
    <van-tabs v-model="active" scrollspy sticky color="#ff702f" title-active-color="#ff702f"  >
  <van-tab v-for="(item, index) in navList" :key="index" :title="item">
   <component :is="contentList[index]" ref="componentRef"></component>
  </van-tab>
</van-tabs>
  </div>
</template>

<script>
import DetailsVue from '@/components/front/shop/Details.vue'
import morePush from '@/components/front/shop/morePush.vue'
import EevaluateVue from '@/components/front/shop/Eevaluate.vue'
export default {
  components: { DetailsVue, EevaluateVue, morePush },
  data() {
    return {
      navList: ['商品详情', '用户评价', '更多商品推存'],
      contentList: ['DetailsVue', 'EevaluateVue', 'morePush'],
      isFixed: false, // 是否需要固定导航栏
      activeName: 'shop0',
      divHeight: 0,
      active: 0,
      goods:''
    }
  },
 watch: {
  goods: {
    immediate: true, // 立即执行回调函数
    handler(newVal) {
      if(newVal!==''){
        this.$nextTick(()=>{
    this.$refs.componentRef[0].goods= newVal
  }) 
      }
    }
  }
}
}
</script>

<style scoped lang="less">
/deep/.van-sticky{
  margin-left: 20px;
  margin-top: 20px;
} 
/deep/.van-sticky--fixed{
  width: 1170px;
 margin: auto;
}
</style>
